<template>
  <div
    class="container__content__message__msgPanel__content"
    @click="
      () => {
        if (userInfo?.username) {
          router.push('/mailList/groupchat');
        } else {
          showToast('您还未登录,请登录后使用');
        }
      }
    "
  >
    <div class="container__content__message__msgPanel__content__left">
      <img src="../../../image/snow.png" alt="" />
    </div>
    <div class="container__content__message__msgPanel__content__mid">
      <div class="container__content__message__msgPanel__content__mid__top">
        医患聊天室
      </div>
      <div class="container__content__message__msgPanel__content__mid__bottom">
        用于医生和患者交流的聊天室
      </div>
    </div>
    <div class="container__content__message__msgPanel__content__right">
      {{ new Date().toLocaleDateString() }}
    </div>
  </div>
  <transition
    enter-active-class="animate__animated animate__bounceInLeft"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <Toast v-if="isShow" :message="toastMessage" />
  </transition>
</template>
<script setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import Toast, { showToastEffect } from "../../../components/Toast.vue";
import storage from "../../../utils/storage";
const { showToast, isShow, toastMessage } = showToastEffect();
let userInfo = reactive({});
userInfo = storage.getItem("userInfo");
const router = useRouter();
</script>
<style lang="scss" scoped>
.container__content__message__msgPanel__content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 16rem;
  color: #919191;
  &__left {
    margin-top: 20rem;
    background-color: #fff;
    & img {
      width: 68rem;
      height: 68rem;
      border-radius: 50%;
    }
  }
  &__mid {
    width: 220rem;
    height: 68rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    &__top {
      font-size: 18rem;
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
